import ReactDOM from 'react-dom'
import { useState, useRef, memo, useMemo } from 'react'
type Child2Props = {
  user: { age: number }
}
const Child = memo(({ user }: Child2Props) => {
  console.log('child组件更新')
  return (
    <div style={{ backgroundColor: '#abc', padding: 5 }}>
      子组件 - 年龄： {user.age}
    </div>
  )
})

const App = () => {
  const [count, setCount] = useState(100)
  const [theme, setTheme] = useState('pink')

  // const user = { age: 18 }
  // const userRef = useRef({ age: 18 })

  // 验证对象中共包含state/props这样额可变数据的时候
  // 他也不会变化，就完蛋了
  // 所以笔记代码中也对此做了解释，就是这种用法它只适用于不包含state/props 的对象
  // 因为它引用不变的特征，会导致没有办法获取最新的值，就像这里看到的现象一样
  // 所以对于包含state/props的对象(比如,age: count}，count为组件 state)，还应该使用useMemo Hook

  const userRef = useRef({ age: count })

  // const users = useMemo(() => {
  //   return {
  //     age: count + 15
  //     // age: 19
  //   }
  // }, [count])

  return (
    <div style={{ backgroundColor: theme, padding: 10 }}>
      <button onClick={() => setTheme(theme === 'pink' ? 'white' : 'pink')}>
        切换主题
      </button>
      <h1>计数器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <hr />
      <Child user={userRef.current} />
      {/* <Child user={users} /> */}
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))
